<template>
	<c-bottom-popup ref="popup">
		<view class="py-3-1 text-center">
			<text class="color-main font-semibold text-l">{{ title }}</text>
		</view>
		<view class="row-center pl-1-3 mb-2-2">
			<view class="flex-1">
				<text class="color-main text-m">
					{{ dateUtil.format(curMinDate, 'yyyy年MM月') }}
				</text>
			</view>
			<view class="p-1-3" :class="[dayData[0].dateText === nowDayText ? 'opacity-50' : '']" @click="toLastWeek">
				<text class="text-m">上一周</text>
			</view>
			<view class="p-1-3" @click="toNextWeek">
				<text class="text-m">下一周</text>
			</view>
		</view>
		<view class="row-center mb-3-1">
			<view v-for="(el, i) in dayData" :key="el.day" class="flex-1 flex-center">
				<view class="mb-1-3">
					<text class="color-main text-m">{{ el.weekday }}</text>
				</view>
				<view
					class="flex-center rounded-full border"
					style="width: 80rpx; height: 80rpx"
					@click="selectDay(i)"
					:class="[getDayBorderClass(el, i)]"
				>
					<text class="text-m">{{ el.day }}</text>
				</view>
			</view>
		</view>
		<view class="border-t b-active-op20 py-3-1 mx-1-3 time-slot">
			<view
				class="border b-active-op20 rounded-m text-center py-3-1"
				v-for="el in timeSlotData"
				:key="el.text"
				@click="handleSelectScope(el)"
			>
				<text class="color-main text-m">{{ el.text }}</text>
			</view>
		</view>
	</c-bottom-popup>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import dateUtil from '@/uni-sdk/utils/date.js';

const props = defineProps({
	options: Object,
	title: String,
});
const emits = defineEmits(['select']);
const popup = ref();
watch(
	() => props.options,
	(options) => {
		popup.value.open();
	}
);

const now = new Date();
const nowDayText = dateUtil.format(now);
const curMinDate = ref(now);
const dayNum = 7;
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
const dayData = computed(() => {
	let i = 1;
	let cur = new Date(curMinDate.value.getTime());
	const data = [];
	while (i <= 7) {
		data.push({
			weekday: weekdays[cur.getDay()],
			day: cur.getDate(),
			dateText: dateUtil.format(cur),
		});
		cur = dateUtil.addDays(cur, 1);
		i++;
	}
	return data;
});

const timeSlotData = ref([
	{ text: '08:00-11:00',value: [8, 11] },
	{ text: '11:00-14:00',value: [11, 14] },
	{ text: '14:00-17:00',value: [14, 17] },
	{ text: '17:00-20:00',value: [17, 20] },
]);

const activeIndex = ref(-1);
function selectDay(index) {
	activeIndex.value = index;
}
function getDayBorderClass(el, index) {
	if (index === activeIndex.value) {
		return 'b-active bg-active color-white';
	}
	if (el.dateText === nowDayText) {
		return 'b-active-op20 color-main';
	}
	return 'b-transparent color-main';
}

function toLastWeek() {
	if (dayData.value[0].dateText === nowDayText) return;
	curMinDate.value = dateUtil.addDays(curMinDate.value, -7);
	activeIndex.value = -1;
}
function toNextWeek() {
	curMinDate.value = dateUtil.addDays(curMinDate.value, 7);
	activeIndex.value = -1;
}
function handleSelectScope(el) {
	if(activeIndex.value === -1) {
		return getApp().globalData.toast("请先选择日期");
	};
	emits("select", {
		day: dayData.value[activeIndex.value],
		timeSlot: el,
	});
	popup.value.close();
}
</script>

<style>
.time-slot {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	row-gap: 24rpx;
	column-gap: 24rpx;
}
</style>